<template>
	<view
		class="bg-white relative rounded-[30rpx] relative px-4 py-4 box-border flex justify-between items-center"
	>
		<view
			v-if="isDel"
			class="destroy absolute right-0 top-4 z-3 rounded-lt-[27rpx] rounded-lb-[27rpx]"
			@tap.stop="deleteBook(item)"
		></view>
		<image class="w-[212rpx] h-[250rpx] rounded-[30rpx]" :src="item.cover_img"></image>
		<view
			class="pl-2 py-2 h-[250rpx] box-border flex flex-col justify-between"
			style="width: calc(100% - 212rpx)"
		>
			<view class="w-full">
				<view
					class="w-full text-[33rpx font-bold text-[#303030] box-border line-clamp-2"
					:style="{ paddingRight: isDel ? '80rpx' : '' }"
					>{{ item.name }}</view
				>
				<view class="text-[22rpx] text-[#303030] mt-1">{{ item.author || '-' }}</view>
				<rich-text
					class="w-full text-[22rpx] text-[#919191] inline-block mt-1 line-clamp-2"
					:nodes="item.descript"
				></rich-text>
			</view>
			<view
				:class="[
					'w-full',
					'flex',
					item.finish_book_user_count ? 'justify-between' : 'justify-end',
					'items-center',
				]"
				v-if="item.progress === 0"
			>
				<view
					class="relative px-4 h-[38rpx] flex justify-center text-[#fff] text-[21rpx] items-center border-1 border-solid border-[#F1F1F1] rounded-[17rpx]"
					style="width: fit-content; background: #2ba5e0"
					v-if="item.finish_book_user_count"
				>
					<view class="flex items-center mr-2" v-if="item.finish_book_user_avatar.length">
						<image
							class="w-[47rpx] h-[47rpx] -ml-[37rpx] border-1 border-solid border-[#fff] rounded-[50%]"
							v-for="cited in item.finish_book_user_avatar"
							:key="cited.avatar"
							:src="cited.avatar || baseImg + '/user-default.png'"
						></image>
					</view>
					{{ item.finish_book_user_count }}
					人读过</view
				>
				<view
					class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
					:style="{ background: '#2BA5E0' }"
					>开始学习</view
				>
			</view>
			<view
				class="w-full flex justify-between items-center"
				v-if="item.progress > 0 && item.progress < 100"
			>
				<view class="flex items-center">
					<image
						class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
						:src="userInfo.avatar || baseImg + '/user-default.png'"
					></image>
					<view class="w-[153rpx] flex flex-col items-center justify-center">
						<text class="text-[#48C855] text-[21rpx]">学习进度{{ item.progress }}%</text>
						<view
							class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
							:style="{ background: '#F2F0F3' }"
						>
							<view
								class="h-full absolute top-0 left-0 rounded-tl-[5rpx] rounded-bl-[5rpx]"
								:style="{ background: '#48C855', width: item.progress + '%' }"
							></view>
						</view>
					</view>
				</view>
				<view
					class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
					:style="{ background: '#48C855' }"
					>继续学习</view
				>
			</view>
			<view class="w-full flex justify-between items-center" v-if="item.progress === 100">
				<view class="flex items-center">
					<image
						class="w-[50rpx] h-[50rpx] rounded-[50%] mr-1"
						:src="userInfo.avatar || baseImg + '/user-default.png'"
					></image>
					<view class="w-[153rpx] flex flex-col items-center justify-center">
						<text class="text-[#F1BF10] text-[21rpx]">已学完100%</text>
						<view
							class="w-full h-[11rpx] relative rounded-[5rpx] overflow-hidden"
							:style="{ background: '#F2F0F3' }"
						>
							<view
								class="h-full absolute top-0 left-0 w-full rounded-[5rpx]"
								:style="{ background: '#F1BF10' }"
							></view>
						</view>
					</view>
				</view>
				<view
					v-if="item.book_integral > 0"
					class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
					:style="{ background: '#F1BF10' }"
					>再次学习</view
				>
				<view
					v-else
					class="text-[#fff] text-[24rpx] rounded-[24rpx] h-[47rpx] px-[25rpx] flex justify-center items-center"
					:style="{ background: '#F1BF10' }"
					@tap.stop="receive(item)"
					>领取+{{ item.single_book_integral
					}}<image
						:src="baseImg + '/book/book-receive.png'"
						class="w-[24rpx] h-[24rpx] ml-[10rpx]"
					></image
				></view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const emit = defineEmits(['receive', 'deleteBook']);

withDefaults(
	defineProps<{
		item: any;
		isDel: boolean;
	}>(),
	{
		item: {},
		isDel: false,
	},
);

const receive = item => {
	emit('receive', item);
};

const deleteBook = item => {
	emit('deleteBook', item);
};
</script>

<style lang="scss" scoped>
.destroy::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 75rpx;
	height: 55rpx;
	color: #919191;
	content: 'x';
	background: #e8e8e8;
	border-radius: 27rpx 0 0 27rpx;
}
</style>
